/*
 * @Description: 布局、边距、填充、圆角相关
 * @Author: yilingsj（315800015@qq.com）
 * @Date: 2021-03-29 18:22:05
 * @LastEditors: yiling (315800015@qq.com)
 * @LastEditTime: 2021-08-03 16:07:43
 */
* {
  box-sizing: border-box;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}

.wrap {
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.flex-1 {
  flex: 1;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.flex-end {
  justify-content: flex-end;
}

.align-center {
  align-items: center;
}
// 两列等高
.align-stretch {
  align-items: stretch;
}
.align-initial {
  align-items: initial !important;
}

.all-center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column {
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}
.flex-shrink {
  flex-shrink: 0;
}

// 鼠标小手
.pointer {
  cursor: pointer;
}

// 全屏宽度
.fluid {
  width: 100%;
}

// 宽度自动
.fluid-auto {
  width: auto !important;
}
.block {
  display: block;
}
.bold {
  font-weight: bold;
}
.pointer-events-none {
  pointer-events: none;
}
.overflow-hidden {
  overflow: hidden;
}
image,
img {
  vertical-align: top;
}

// 图片占位
.img-wrap {
  position: relative;
  height: 0;
  overflow: hidden;
  .img {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: inherit;
  }
}
// 关闭数字框右侧的箭头
input[type='number'],
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -moz-appearance: textfield;
  -webkit-appearance: none !important;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

// 基数4
$baseSize: 4;

// 栅格布局
@for $i from 1 through 12 {
  .column-#{$i} {
    width: (100% / $i);
    flex-shrink: 0;
    box-sizing: border-box;
  }
}

// 填充 4x
@for $i from 1 through 10 {
  .p-#{$i} {
    padding: $i * $baseSize + px;
  }

  .pb-#{$i} {
    padding-bottom: $i * $baseSize + px;
  }
  .pt-#{$i} {
    padding-top: $i * $baseSize + px;
  }
  .ptb-#{$i} {
    padding-top: $i * $baseSize + px;
    padding-bottom: $i * $baseSize + px;
  }

  .pl-#{$i} {
    padding-left: $i * $baseSize + px;
  }

  .plr-#{$i} {
    padding-left: $i * $baseSize + px;
    padding-right: $i * $baseSize + px;
  }
}

// 边距4x
@for $i from 0 through 12 {
  .m-#{$i} {
    margin: $i * $baseSize + px;
  }

  .mb-#{$i} {
    margin-bottom: $i * $baseSize + px !important;
  }

  .ml-#{$i} {
    margin-left: $i * $baseSize + px;
  }

  .mlr-#{$i} {
    margin-left: $i * $baseSize + px;
    margin-right: $i * $baseSize + px;
  }

  // 负
  .negative-m-#{$i} {
    margin: -$i * $baseSize + px;
  }

  .negative-mb-#{$i} {
    margin-bottom: -$i * $baseSize + px;
  }

  .negative-mt-#{$i} {
    margin-top: -$i * $baseSize + px;
  }

  .negative-ml-#{$i} {
    margin-left: -$i * $baseSize + px;
  }

  .negative-mlr-#{$i} {
    margin-left: -$i * $baseSize + px;
    margin-right: -$i * $baseSize + px;
  }
}

@media (max-width: 1300px) {
  // 栅格布局
  .column-5 {
    // width: 33.3333333%;
  }
}
